<template>
	<el-dialog title="用户信息" :visible.sync="dialogVisible" @opened="dialogOpen">
		<el-form ref="form" :model="form" label-width="80px" size="small">
			<el-form-item prop="username" label="账号" :rules="[{ required: true, message: '不能为空'}]" >
				<el-input v-model="form.username"></el-input>
			</el-form-item>
			<el-form-item prop="password" label="密码" :rules="[{ required: true, message: '不能为空'}]" v-if="!form.uid">
				<el-input v-model="form.uid"></el-input>
			</el-form-item>
			<el-form-item prop="nickname" label="用户名称" :rules="[{ required: true, message: '不能为空'}]">
				<el-input v-model="form.nickname"></el-input>
			</el-form-item>
			<el-form-item prop="email" label="邮箱">
				<el-input v-model="form.email"></el-input>
			</el-form-item>
			<el-form-item prop="mobile" label="电话号码">
				<el-input v-model="form.mobile"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :loading="loading" @click="saveUser">保存</el-button>
				<el-button @click="close">取消</el-button>
			</el-form-item>
		</el-form>

	</el-dialog>

</template>
<script>
import userService from "@/api/sys/user";
export default {
	name: "userEditForm",
	props: {
		user: Object,
		value: Boolean
	},
	data() {
		return {
			loading: false,
			dialogVisible: false,
			form: {
				uid:0,
				username: "",
				nickname: "",
				mobile: "",
				email: ""
			}
		};
	},
	watch: {
		value(val) {
			this.dialogVisible = val;
		},
		dialogVisible(val) {
			this.$emit("input", val);
		}
	},
	methods: {
		dialogOpen() {
			this.$refs.form.resetFields();
			if (this.user.uid) {
				userService.getUser(this.user.uid).then(data => {
					let form = {};
					form.username = data.username;
					form.nickname = data.nickname;
					form.mobile = data.mobile;
					form.email = data.email;
					this.form = form;
				});
			} else {
				this.form = {};
			}
		},
		saveUser() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					this.loading = true;
					userService
						.saveUser({ ...this.form, uid: this.user.uid })
						.then(data => {
							this.loading = false;
							this.dialogVisible = false;
							this.$emit("submit");
						});
				} else {
					return false;
				}
			});
		},
		close() {
			this.$refs["form"].resetFields();
			this.dialogVisible = false;
		}
	}
};
</script>

